<!DOCTYPE html>
<html lang="zh_Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="a.css">
    <title>KbNavigator</title>
</head>

<body>
    <header><h1>Press any Key for Navigation</h1></header>
    <main>
        <div id="bgTool"></div>
        <div id="keyBoard"></div>
    </main>
    <footer></footer>
    <script>
        var bg = ['bg1', 'bg2', 'bg3', 'bg4']
        var cur = 0
        bgTool.onclick = function (e) {
            cur = (cur + 1) % 4
            document.body.className = bg[cur];
        }
    </script>
    <script>

        //1.初始化环境
        var env = init();
        var hash = env['hash'];
        var keys = env['keys'];

        //2.生成键盘
        generateKeyboard(hash, keys);

        //3.监听输入
        listenToInput(hash);

        //下面是工具函数
        function createE(name, attributes) {
            var tag = document.createElement(name);
            for (var a in attributes) {
                tag[a] = attributes[a];
            }
            return tag;
        }

        function init() {
            var hash = {
                'q': 'qq.com',
                'w': 'weibo.com',
                'e': 'eastmoney.com',
                'r': 'rngtest.com',
                't': 'tudou.com',
                'y': 'yunpan.360.cn',
                'u': 'union-click.jd.com',
                'i': 'iqiyi.com',
                'o': 'opera.com',
                'p': 'pchome.com',
                'a': 'alibaba.com',
                's': 'suning.com',
                'd': 'douyu.com',
                'f': 'frankfang.com',
                'g': 'guowu.360.cn',
                'h': 'hao123.com',
                'j': 'javascript.ruanyifeng.com',
                'k': 'k.360kan.com',
                'l': 'licai.360.cn',
                'z': 'zhihu.com',
                'x': 'xiaohua.360.cn',
                'c': 'club.autohome.com',
                'v': 'vr.hao.360.cn',
                'b': 'bilibili.com',
                'n': 'news.bitauto.com',
                'm': 'mail.aliyun.com',
                length: 26
            }

            //hash出现，读档
            var hashInLocalStorage = JSON.parse(localStorage.getItem('keyInfo') || 'null')
            if (hashInLocalStorage) {
                hash = hashInLocalStorage
            }

            var keys = {
                '0': { '0': 'q', '1': 'w', '2': 'e', '3': 'r', '4': 't', '5': 'y', '6': 'u', '7': 'i', '8': 'o', '9': 'p', length: 10 },
                '1': { '0': 'a', '1': 's', '2': 'd', '3': 'f', '4': 'g', '5': 'h', '6': 'j', '7': 'k', '8': 'l', length: 9 },
                '2': { '0': 'z', '1': 'x', '2': 'c', '3': 'v', '4': 'b', '5': 'n', '6': 'm', length: 7 },
                length: 3
            }

            return {
                'hash': hash,
                'keys': keys
            }
        }

        function generateKeyboard(hash, keys) {
            for (var index = 0; index < 3; index = index + 1) {
                var row = keys[index];
                var div1 = createE('div', { 'className': 'clearfix' });

                for (var index2 = 0; index2 < row['length']; index2 = index2 + 1) {
                    var div2 = createE('div', { 'className': 'kbd-wrapper' });

                    var kbd1 = createE('kbd');
                    kbd1.textContent = keys[index][index2];

                    var img = createE('img');
                    if (hash[row[index2]]) {
                        img.src = "http://" + hash[row[index2]] + "/favicon.ico";
                    } else {
                        img.src = "img/invalid.ico";
                    }
                    img.onerror = function (e) {
                        console.log("下载失败");
                        e.target.src = "img/invalid.ico";
                    }

                    var button1 = createE('button');
                    button1.textContent = "ED";
                    button1.id = keys[index][index2];
                    button1.onclick = function (e) {
                        var key = e['target']['id'];
                        var x = prompt("请输入一个网址");
                        hash[key] = x;  // hash变更，存档
                        localStorage.setItem('keyInfo', JSON.stringify(hash))
                        button2 = e.target;
                        var img2 = button2.previousSibling
                        img2.src = "http://" + x + "/favicon.ico";
                        img2.onerror = function (e) {
                            console.log("下载失败");
                            e.target.src = "img/invalid.ico";
                        }
                    }

                    keyBoard.appendChild(div1);
                    div1.appendChild(div2);
                    div2.appendChild(kbd1);
                    div2.appendChild(img);
                    div2.appendChild(button1);
                }
            }
        }

        function listenToInput(hash) {
            document.onkeypress = function (e) {
                var key = e['key'];
                window.open("http://" + hash[key], '_blank');
            }
        }

    </script>
</body>

</html>